<template>
	<el-main>
		<el-row>
			当前登录用户：{{userInfo.name}}
			<hr>
		</el-row>
		<el-form :inline="true" class="demo-form-inline">
		  <el-form-item label="姓名">
		    <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
		  </el-form-item>
		  <el-form-item label="入学时间">
			  <el-date-picker
				v-model="searchForm.joinTimeStart"
				type="date"
				value-format="yyyy-MM-dd HH:mm:ss"
				placeholder="开始日期">
			  </el-date-picker>
		  </el-form-item>
		  <el-form-item>
			  <el-date-picker
				v-model="searchForm.joinTimeEnd"
				type="date"
				value-format="yyyy-MM-dd HH:mm:ss"
				placeholder="结束日期">
			  </el-date-picker>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="onSubmit">查询</el-button>
		  </el-form-item>
		</el-form>
		
		<el-table
		    ref="multipleTable"
		    :data="stuList"
		    tooltip-effect="dark"
		    style="width: 100%"
		    @selection-change="handleSelectionChange">
		    <el-table-column
		      type="selection"
		      width="55">
		    </el-table-column>
			<el-table-column label="#" prop="id" width="50"></el-table-column>
		    <el-table-column
		      prop="name"
		      label="姓名"
		      width="120">
		    </el-table-column>
			
			<el-table-column label="头像">
				<template slot-scope="scope">
					<img :src="baseUrl+scope.row.headImg" style="height: 50px;">
				</template>
			</el-table-column>
			
			<el-table-column label="所属班级">
				<template slot-scope="scope">
					<span v-for="item in classesList" v-if="item.id==scope.row.classesId">{{item.name}}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="爱好" prop="hobbyNames"></el-table-column>
			
			<el-table-column label="所属地区">
				<template slot-scope="scope">
					{{scope.row.proviceName}}{{scope.row.cityName}}{{scope.row.areaName}}
				</template>
			</el-table-column>
			
		    <el-table-column
		      prop="joinTime"
		      label="入学时间"
		      show-overflow-tooltip>
		    </el-table-column>
		
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger"  @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		  </el-table>
		  
		  <el-row>
			  <el-col :span="10">
				  <el-button size="medium" type="danger" @click="handleBatchDelete">批删</el-button>
				  <el-button size="medium" type="primary" @click="openAddDialog">添加</el-button>
				  <el-button size="medium" type="primary" @click="openClasses">班级管理</el-button>
			  </el-col>
			  <el-col :span="14">
				  <el-pagination
				        @size-change="handleSizeChange"
				        @current-change="handleCurrentChange"
				        :current-page="searchForm.currentPge"
				        :page-sizes="[10, 20, 30, 40]"
				        :page-size="searchForm.pageSize"
				        layout="total, sizes, prev, pager, next, jumper"
				        :total="total">
				      </el-pagination>
			  </el-col>
		  </el-row>
		  
		  <!-- 添加对话框 -->
		  <el-dialog title="添加" :visible.sync="dialogFormVisible" width="70%" >
		    <el-form ref="saveForm" :model="saveForm" label-width="80px">
		      <el-form-item label="学生姓名">
		        <el-input v-model="saveForm.name"></el-input>
		      </el-form-item>
			  <el-form-item label="学生头像">
				  <el-upload
				    class="avatar-uploader"
				    :action="baseUrl+'file/upload'"
				    :show-file-list="false"
				    :on-success="handleAvatarSuccess">
				    <img v-if="imageUrl" :src="imageUrl" class="avatar">
				    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
				  </el-upload>
			  </el-form-item>
			  <el-form-item label="所属城市">
				  <el-cascader v-model="areaIdArr"
				  :props="{value:'value',label:'label',children:'children'}" 
				  @change="areaChange" 
				  :options="areaTree"
				  ></el-cascader>
			  </el-form-item>
			  <el-form-item label="学生爱好">
				  <el-checkbox-group v-model="hobbyIdList" @change="handleCheckedCitiesChange">
				  <el-checkbox v-for="hobby in hobboyList" :label="hobby.id" :key="hobby.id">{{hobby.name}}</el-checkbox>
				</el-checkbox-group>
			  </el-form-item>
			  <el-form-item label="入学时间">
				  <el-date-picker
				        v-model="saveForm.joinTime"
				        type="date"
						value-format="yyyy-MM-dd HH:mm:ss"
				        placeholder="选择日期">
				      </el-date-picker>
			  </el-form-item>
			  
			  <el-form-item label="所属班级">
				  <el-select v-model="saveForm.classesId" placeholder="请选择班级">
				      <el-option
				        v-for="item in classesList"
				        :key="item.id"
				        :label="item.name"
				        :value="item.id">
				      </el-option>
				    </el-select>
			  </el-form-item>
				
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="dialogFormVisible = false">取 消</el-button>
		      <el-button type="primary" @click="save">确 定</el-button>
		    </div>
		  </el-dialog>
		  
		  
		  <!-- 添加对话框 -->
		  <el-dialog title="班级管理" :visible.sync="dialogClaassesVisible" width="50%" >
			  <el-row v-for="(item,index) in classesList">
				  <el-col :span="14"><el-input v-model="item.name"></el-input></el-col>
				   <el-col :span="10"><el-button type="danger" @click="delClasses(index)">删除</el-button></el-col>
			  </el-row>
			  <el-row>
				  <el-button type="primary" @click="addClasses">添加</el-button>
			  </el-row>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="dialogClaassesVisible = false">取 消</el-button>
		      <el-button type="primary" @click="saveClasses">确 定</el-button>
		    </div>
		  </el-dialog>
		  
	</el-main>
</template>

<script>
	const baseUrl = "http://localhost:9090/";
	export default {
		data(){
			return {
				stuList:[{id:1,name:"张三"},{id:2,name:"张三"}],
				searchForm:{
					pageSize:5,
					currentPge:1
				},
				total:100,
				stuIdList:[],
				dialogFormVisible:false,
				dialogClaassesVisible:false,
				saveForm:{
					hobbyIdList:[],
					imageUrl:null
				},
				imageUrl:null,
				baseUrl:baseUrl,
				areaTree:[],
				areaIdArr:[],
				hobboyList:[{id:1,name:"踢皮球"},{id:2,name:"打篮球"},{id:3,name:"codeJava"}],
				hobbyIdList:[2,3,4],
				classesList:[{id:1,name:"1708d"},{id:2,name:"1803D"}],
				userInfo:{}
			}
		},
		methods:{
			openClasses(){
				this.queryAllClasses();
				this.dialogClaassesVisible = true;
			},
			addClasses(){
				//向classesList添加一个对象
				this.classesList.push({});
			},
			delClasses(index){
				console.log(index)
				//删除classesList中元素
				this.classesList.splice(index,1);
				
			},
			saveClasses(){
				this.axios.post(baseUrl+"classes/save",{classesList:this.classesList}).then(res=>{
					this.dialogClaassesVisible = false;
					this.classesList = res.data.data;
				})
			},
			handleCheckedCitiesChange(hobbyIdList){
				console.log(this.saveForm);
				this.saveForm.hobbyIdList = hobbyIdList;
			},
			//列表
			list(){
				this.axios.get(baseUrl+'student/getPageInfo',{params:this.searchForm}).then(res=>{
					console.log(res.data.data.list);
					let data  = res.data.data;
					this.stuList = data.list;
					this.total = data.total;
					this.searchForm.pageSize = data.pageSize;
				})
			},
			//表格多选时间
			handleSelectionChange(rows){
				// console.log(rows);
				/* rows.forEach(row=>{
					console.log(row.id);
				}) */
				let stuIdList = rows.map(row=>{
					return row.id;
				});
				this.stuIdList = stuIdList;
				console.log(stuIdList)
			},
			//图片上传成功，回调该方法
			handleAvatarSuccess(res){
				console.log(res)
				this.imageUrl = res.data.fileUrl;
				this.saveForm.headImg = res.data.fileName;
			},
			//打开添加编辑对话框
			openAddDialog(){
				this.dialogFormVisible = true;
				this.saveForm = {
					hobbyIdList:[],
					imageUrl:null
				};

				this.imageUrl = null;
				this.hobbyIdList=[];
				this.areaIdArr = [];
				
			},
			//级联操作，给省市区字段赋值
			areaChange(areaIdArr){
				console.log(areaIdArr);
				this.saveForm.proviceId = areaIdArr[0];
				this.saveForm.cityId = areaIdArr[1];
				this.saveForm.areaId = areaIdArr[2];
			},
			//保存方法
			save(){
				console.log(this.saveForm);
				this.axios.post(baseUrl+"student/save",this.saveForm).then(res=>{
					this.dialogFormVisible = false;
					this.searchForm.pageNum=1;
					this.list();
				})
			},
			//编辑方法
			handleEdit(row){
				this.dialogFormVisible = true;
				this.imageUrl = null;
				this.axios.get(baseUrl+"student/getById",{params:{id:row.id}}).then(res=>{
					let saveForm = this.saveForm = res.data.data;
					this.imageUrl = res.data.data.headImg?baseUrl+res.data.data.headImg:null;
					//级联菜单回显
					this.areaIdArr = [saveForm.proviceId,saveForm.cityId,saveForm.areaId];
					this.hobbyIdList = res.data.data.hobbyIdList;
				})
				console.log(row)
			},
			//删除方法
			handleDelete(row){
				console.log(row);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.axios.post(baseUrl+"student/batchDel",{stuIdList:[row.id]}).then(res=>{
						if(res.data.result){
							this.searchForm.pageNum=1;
							this.list();
							this.$message({
									type: 'success',
									message: '删除成功!'
							});
						}
					})
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			},
			//批删
			handleBatchDelete(){
				console.log(this.stuIdList);
				if(this.stuIdList.length==0){
					// this.$message("请选择数据")
					this.$message({type:"warning",message:"请选择数据"});
					return;
				}
				
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.axios.post(baseUrl+"student/batchDel",{stuIdList:this.stuIdList}).then(res=>{
						if(res.data.result){
							this.searchForm.pageNum=1;
							this.list();
							this.$message({
												type: 'success',
												message: '删除成功!'
							});
						}
					})
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
				
			},
			//查询方法
			onSubmit(){
				console.log(this.searchForm)
				this.searchForm.pageNum=1;
				this.list();
				
			},
			//分页：页数改变事件
			handleSizeChange(val){
				console.log("handleSizeChange",val)
			},
			//当前页
			handleCurrentChange(val){
				console.log("handleCurrentChange",val)
				this.searchForm.pageNum=val;
				this.list();
				
			},
			//级联菜单数据
			queryAreaTree(){
				this.axios.get(baseUrl+'/area/tree').then(res=>{
					this.areaTree = res.data.data;
				})
			},
			queryAllHobbyList(){
				this.axios.get(baseUrl+'/hobby/getAllHobbyList').then(res=>{
					this.hobboyList = res.data.data;
				})
			},
			queryAllClasses(){
				this.axios.get(baseUrl+'/classes/getAllClasses').then(res=>{
					this.classesList = res.data.data;
				})
			}
		},
		created(){
			this.list();
			this.queryAreaTree();
			this.queryAllHobbyList();
			this.queryAllClasses();
			//获取用户信息
			let userInfoStr = localStorage.getItem("userInfo");
			
			if(userInfoStr==null){
				this.$router.push("/login");
			}
			
			let userInfo = JSON.parse(userInfoStr);
			console.log(userInfo);
			this.userInfo = userInfo;
			
		}
	}
</script>

<style scoped>
	.el-row {
		margin-top: 20px;
	}
	
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>